<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 园区总览"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row
      style="margin: 0;"
      :gutter="15"
      v-if="zfNameflag"
    >
      <el-col :span="16"
      >
        <div class="box">
          <div class="content-body card">
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo/园区 @2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ parkCount }}</div>
              </div>
              <div>化工园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo/国家级园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalParkCount }}</div>
              </div>
              <div>国家级园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo/三十强园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalTopThirtyParkCount }}</div>
              </div>
              <div>全国三十强园区</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../assets/img/industry/zfParkOverviewTwo/潜力十强园区@2x.png"
                  width="80"
                  height="78"
                  alt=""
                />
                <div>{{ nationalPotentialTopThenParkCount }}</div>
              </div>
              <div>全国潜力十强园区</div>
            </div>
          </div>
        </div>
        <div class="box box1">
          <div class="title"><p>浙江省化工园区排名</p></div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
              >
                营收
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
              >
                税收
              </div>
              <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
              >
                亩均税收
              </div>
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
              >
                园区指数
              </div>
              <div style="color: #bbdaff" @click="showParkRank()">
                查看全国园区排名>
              </div>
            </div>
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="505"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '12px 0' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="index"
                  header-align="center"
                  align="center"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  property="parkName"
                  width="280"
                  :show-overflow-tooltip="true"
                  label="园区名称"
                >
                  <template scope="scope">
                    <span
                      style="
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        cursor: pointer;
                        color: #1492ff;
                      "
                      @click="toDetail(scope.row)"
                      >{{ scope.row.parkName }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="showInfo"
                  :show-overflow-tooltip="true"
                  :label="showInfo"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >

                      {{ scope.row.showInfo>-1?scope.row.showInfo:'&nbsp;&nbsp;' }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="entCount"
                  :show-overflow-tooltip="true"
                  label="企业数"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.entCount }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  property="parkArea"
                  :show-overflow-tooltip="true"
                  label="占地面积(亩)"
                >
                  <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.parkArea }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  property="cityName"
                  :show-overflow-tooltip="true"
                  label="所在地区"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="box box2">
        <div class="title"><p>化工园区分布</p></div>

         <div style="position: relative;">
          <div id="map" style="width: 100%; height: 733px"></div>
          <div style="position: absolute;bottom: 10px;color:#00E4FF; width: 100%;   text-align: center; font-size: 12px">此页面经济相关数据来源时间：{{dataTime}}年</div>
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="moreShow" class="content-body" width="60%" custom-class="black">
      <div class="tabs">
        <div
          :class="active1 === 0 ? 'selectActive' : ''"
          @click="active1Click(0)"
        >
          全国三十强
        </div>
        <div
          :class="active1 === 1 ? 'selectActive' : ''"
          @click="active1Click(1)"
          style="border-left: 1px solid #7db2d0"
        >
          全国潜力十强
        </div>
        <div></div>
      </div>
      <div id="tableColor1">
        <el-table
          ref="table1"
          :data="showTableData"
          style="width: 100%"
          height="450"
          stripe
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            :property="
              active1 === 0
                ? 'nationalParkTopThirty'
                : 'nationalPotentialParkTopTen'
            "
            header-align="center"
            align="center"
            label="排名"
          ></el-table-column>
          <el-table-column
            property="parkName"
            :show-overflow-tooltip="true"
            label="园区名称"
          >
          </el-table-column>
          <el-table-column
            property="provinceName"
            header-align="center"
            align="center"
            label="所在省份"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
const echarts = require('echarts')
export default {
  name: 'zfParkOverview',
  components: { govheader, govnavigation },
  data () {
    return {
      zfNameflag: true,
      year: '',
      center: {},
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      topTenData: [],
      topThirtyData: [],
      showTableData: [],
      active: 1,
      active1: 0,
      dataTime: '2020',
      showInfo: '营收(亿元)',
      moreShow: false,
      myChart1: '',
      option1: '',
      parkCount: '',
      nationalParkCount: '',
      nationalTopThirtyParkCount: '',
      nationalPotentialTopThenParkCount: ''
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    if (this.zfNameflag) {
      this.year = new Date().getFullYear()
      this.$http
        .post(`/home/government/govParkOverview/getParkOverview`, {
          searchYear: this.year
        })
        .then(({ data: res }) => {
          this.parkCount = res.data.parkInfoCount.parkCount
          this.nationalParkCount = res.data.parkInfoCount.nationalParkCount
          this.nationalTopThirtyParkCount =
            res.data.parkInfoCount.nationalTopThirtyParkCount
          this.nationalPotentialTopThenParkCount =
            res.data.parkInfoCount.nationalPotentialTopThenParkCount
          this.tableData1 = res.data.parkIndexList
          this.tableData2 = res.data.incomeList
          this.tableData3 = res.data.taxList
          this.tableData4 = res.data.perMuTaxList
          this.tableData = this.tableData2
          res.data.incomeList.forEach((item) => {
            this.center[item.parkAbbreviation] = [
              item.longitude,
              item.latitude,
              item.parkAddr,
              item.standEntCount,
              item.showInfo
            ]
          })
          this.renderMyChart()
        })
        .catch(() => {})
      this.getright_table()
    }
  },
  beforeDestroy () {
    let _this = this
    clearInterval(_this.intervalId)
    clearInterval(_this.intervalId1)
    clearInterval(_this.startCharts2)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    getright_table () {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    getright_table1 () {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this.intervalId1 = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'statistics-warning-row'
      } else {
        return ''
      }
    },
    activeClick (val) {
      let _this = this
      this.active = val
      if (val === 0) {
        this.showInfo = '园区指数'
      } else if (val === 1) {
        this.showInfo = '营收(亿元)'
      } else if (val === 2) {
        this.showInfo = '税收(亿元)'
      } else if (val === 3) {
        this.showInfo = '亩均税收(万元)'
      }
      let tableData = 'tableData' + (val + 1)
      this.tableData = this[tableData]
      clearInterval(_this.intervalId)
      this.$refs.table.bodyWrapper.scrollTop = 0
      this.getright_table()
    },
    active1Click (val) {
      let _this = this
      this.active1 = val
      if (val === 0) {
        this.showTableData = this.topThirtyData
      } else if (val === 1) {
        this.showTableData = this.topTenData
      }
      clearInterval(_this.intervalId1)
      this.$refs.table1.bodyWrapper.scrollTop = 0
      this.getright_table1()
    },
    toDetail (val) {
      this.$router.push({
        name: 'zfParkOverviewDetailTwo',
        query: {
          parkCode: val.parkCode,
          parkName: val.parkName,
          longitude: val.longitude,
          latitude: val.latitude,
          year: this.year
        }
      })
    },
    showParkRank () {
      this.moreShow = true
      this.$http
        .post(`/home/government/govParkOverview/getAllParkRank`, {
          searchYear: this.year
        })
        .then(({ data: res }) => {
          this.topTenData = res.data.topTen
          this.topThirtyData = res.data.topThirty
          this.showTableData = this.topThirtyData
          this.getright_table1()
        })
        .catch(() => {})
    },
    renderMyChart () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('map'))
      let uploadedDataURL = require('../zhejiang.json')
      let scatterData1 = []
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item))
      }
      echarts.registerMap('js', uploadedDataURL)
      this.option2 = {
        // title: {
        //   text: "浙江省化工园区分布",
        //   top: "10px",
        //   right: "10px",
        //   textStyle: {
        //     width: "100%",
        //     color: "#1c4ca1",
        //   },
        // },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 999',
          // backgroundColor:'rgba(19, 130, 221,0.6)',
          backgroundColor: null,
          borderColor: '#333',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#ffffff'
          },
          formatter: function (para) {
            // console.log(para);
            if (para.seriesType === 'effectScatter') {
              return (
                `<div style="text-align: left;font-size:12px;padding:10px;color:#ffffff;width:200px;overflow:hidden;white-space: pre-wrap;background: url(${require('../../../../assets/img/industry/zfParkOverviewTwo/地图数据框3@2x.png')});background-repeat: no-repeat;background-size: 100% 100%;">` +
                '<div style="text-align: center;font-size:16px;font-weight:600;color:#02D9FD;">' +
                para.data[5] +
                '</div>' +
                '<div>规上企业数: ' +
                para.data[3] +
                '</div>' +
                //  + '<div>主要产业: '+ para.data[5] + '</div>'
                '<div>年度产业营收: ' +
                para.data[4] +
                '(亿元)</div>' +
                '<div>园区地址: ' +
                para.data[2] +
                '</div>' +
                `</div>`
              )
            } else {
              return ''
            }
          }
        },
        geo: [
          {
            map: 'js',
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: '100%',
            layoutCenter: ['54%', '50%'],
            zoom: 1,
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005ddc'
              },
              label: {
                show: true,
                color: '#FFFFFF'
              }
            },
            label: {
              show: true,
              color: '#bbdaff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            itemStyle: {
              normal: {
                color: 'rgb(0, 141, 221)'
              }
            },
            label: {
              // normal: {
              formatter: function (para) {
                return ''
              }
              //                 position: "right",
              //                 color: "#333333",
              //                 borderColor: '#005DDC',
              //                 borderWidth: 1,
              //                 borderType: 'solid',
              //                 padding: 5,
              //                 backgroundColor: 'rgba(255, 255, 255, 1)',
              //                 show: false,
              // },
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            symbol: 'circle',
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.mapAutoPlay(_this.myChart2, _this.option2, 'startCharts2')
    },
    mapAutoPlay (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      timer = setInterval(chartHover, 5000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000)
          flag = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background: #041565;
}
.box {
  padding: 10px;
}
.box1 {
  background-image: url("../../../../assets/img/industry/zfParkOverviewTwo/排名数据框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 8px;
}
.box2 {
  margin-top: 15px;
  background-image: url("../../../../assets/img/industry/zfParkOverviewTwo/园区总览框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
//   padding: 10px 0px 0px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 45%;
    margin-top: 10px;
  }
  .content-body-right {
    width: 55%;
  }
}
.card {
  padding: 5px 0;
  margin-top: 0;
  > div {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../../../../assets/img/industry/zfParkOverviewTwo/园区数据框@2x.png");
    width: 24%;
    float: left;
    margin: 0 0.66%;
    height: 160px;
    padding: 25px;
    color: #ffffff;
    font-weight: 600;
    > div {
      overflow: hidden;
    }
    > div:first-child img {
      float: left;
    }
    > div:first-child div {
      float: left;
      margin-left: 15px;
      margin-top: 20px;
      font-size: 35px;
      background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    > div:last-child {
      margin-top: 10px;
      text-align: center;
      font-size: 16px;
    }
  }
  > div:first-child {
    margin-left: 0;
  }
  > div:last-child {
    margin-right: 0;
  }
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #52CCFF;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
  }
  >div:last-child{
    float: right;
  }
}
.selectActive {
  border: 1px solid #52CCFF;
  background-image: linear-gradient(rgba(0, 180, 255, 0.05), rgba(0, 180, 255, 0.4));
  font-weight: 600;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body-right /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body-right /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      font-size: 12px;
    }
  }
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
    }
  }
}
.content-body /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.content-body-right /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}
#tableColor1 /deep/ .el-table__body {
  width: 100% !important;
}
</style>
<style>
.black{
    background-color: #041565 !important;
}
</style>
